<template>
  <div
    class="spell-question question_style"
    :class="[question.type == 2 ? 'spell-question-blank' : '']"
  >
    <div class="spell-question-header">
      <div class="spell-question-title question-title">
        <span v-html="questionTitle"></span>
      </div>
      <div v-if="question.audio">
        <AudioPlay
          :type="1"
          :audioSrc="baseURL + question.audio"
          :disabled="hasRecording"
        ></AudioPlay>
      </div>
    </div>
    <div class="spell-question-contain">
      <el-radio-group
        v-if="question.type == 1"
        class="question-answer-list"
        v-model="question.stuAnswer[0]"
        :disabled="isAnswer"
      >
        <el-radio
          class="question-radio"
          v-for="(answer, index) in question.answer"
          :label="answer.id"
          :key="answer.id"
          :class="[
            isAnswer && question.stuAnswer[0] == answer.id
              ? 'check-radio-stu'
              : '',
            isAnswer && question.trueAnswer[0].id == answer.id
              ? 'check-radio-true'
              : '',
          ]"
        >
          <span class="check-item-label mr5">
            {{ String.fromCharCode(index + 65) }}：
          </span>
          <span v-if="answer.audio" class="mr5">
            <AudioPlay :type="2" :audioSrc="baseURL + answer.audio"></AudioPlay>
          </span>
          <span v-if="answer.answer">
            <span v-html="answer.answer"></span>
          </span>
        </el-radio>
      </el-radio-group>
      <div class="question-answer-record word-record" v-if="question.type == 3">
        <div class="record-container" v-if="!isAnswer">
          <AudioRecord
            :type="2"
            @start="handleStart"
            @ended="handleEnd"
            @clickEnd="audioRecordEnd()"
            @beforeSatrt="beforeRecordSatrt"
            :ref="`audioRecord-${question.id}`"
            :maxTime="10000"
          ></AudioRecord>
          <div class="read-voice-my mt20" v-if="question.fileData">
            <span class="label"> 我的读音： </span>
            <AudioPlay
              class="ml5"
              :type="2"
              :audioSrc="question.fileData"
            ></AudioPlay>
          </div>
        </div>
        <div class="word-record-score" v-if="isAnswer">
          <span> 得分：{{ question.score || "0" }} </span>
          <div v-if="question.result" class="word-record-score-detail">
            <!-- <div
              class="score-detail-item"
              v-if="question.result.phoneme.letters"
            >
              <label class="score-detail-item-label">标准字母序列:</label>
              <span class="score-detail-item-content">{{
                question.result.phoneme.letters
              }}</span>
            </div> -->
            <div class="score-detail-item">
              <label class="score-detail-item-label"> 标准发音音标: </label>
              <span class="score-detail-item-content">
                [<el-tooltip
                  v-for="(item, index) in question.result.phone.filter(
                    (item) => item.lab && item.lab != '#'
                  )"
                  :key="index"
                  class="item"
                  effect="dark"
                  :content="errType[item.is_err]"
                  placement="bottom"
                  :disabled="item.is_err == 0"
                >
                  <span
                    class="phonetic-text"
                    :class="
                      item.is_err != 0 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ $phoneme2phonetic(item.lab) }}</span
                  > </el-tooltip
                >]
              </span>
            </div>

            <div
              class="item-content item-syllable score-detail-item"
              v-if="Array.isArray(question.result.stress)"
            >
              <label class="score-detail-item-label">重读音节:</label>
              <span class="score-detail-item-content">
                <span
                  class="mr10"
                  v-for="(item, index) in question.result.stress.filter(
                    (item) => item.ref == 1
                  )"
                  :key="index"
                >
                  <span
                    v-for="(item2, index2) in item.char.split('_')"
                    :key="index2"
                    class="phonetic-text-small"
                    :class="
                      item.score != 1 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ $phoneme2phonetic(item2) }}</span
                  >
                </span>
              </span>
            </div>
            <div class="score-detail-item score-detail-item-my">
              <span class="score-detail-item-label">
                <span> 我的读音:</span>
                <AudioPlay
                  class="ml5"
                  :type="2"
                  :audioSrc="question.fileData"
                ></AudioPlay>
              </span>
              <span class="score-detail-item-content">
                [<el-tooltip
                  v-for="(item, index) in question.result.phone.filter(
                    (item) => item.rec && item.rec != '#'
                  )"
                  :key="index"
                  class="item"
                  effect="dark"
                  :content="errType[item.is_err]"
                  placement="bottom"
                  :disabled="item.is_err == 0"
                >
                  <span
                    class="phonetic-text"
                    :class="
                      item.is_err != 0 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ $phoneme2phonetic(item.rec) }}</span
                  > </el-tooltip
                >]
              </span>
            </div>
          </div>
          <div v-else-if="question.fileData" class="word-record-score-detail">
            <div class="score-detail-item score-detail-item-my mt20">
              <span class="score-detail-item-label label-flex">
                <span> 我的读音:</span>
                <AudioPlay
                  class="ml5"
                  :type="2"
                  :audioSrc="question.fileData"
                ></AudioPlay>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="isAnswer" class="spell-question-parse">
        <div
          class="question-parse-item item-true-answer"
          v-if="question.trueAnswer && question.trueAnswer.length > 0"
        >
          <label class="label" for="">正确答案：</label>
          <div
            class="content green-color-text"
            v-for="answer in question.trueAnswer"
            :key="answer.id"
          >
            <span v-if="question.type == 1">{{
              String.fromCharCode(getIndex(answer.id) + 65)
            }}</span>
            <span v-if="question.type == 2">{{
              answer.answer.replace(/\$or\$/g, " 或 ")
            }}</span>
          </div>
        </div>
        <div class="question-parse-item" v-if="question.parse">
          <label class="label" for="">解析：</label>
          <div class="content">
            <span v-html="question.parse"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hasRecording: false,
      errType: {
        0: "发音结果正确",
        1: "多读",
        2: "漏读",
        3: "错读",
        4: "没有浊化",
      },
    };
  },
  computed: {
    questionTitle() {
      if (this.question.type == 2 && this.isAnswer) {
        let newTitle = this.question.title;
        let index = 1;
        let pos = newTitle.indexOf("_____");
        while (pos !== -1) {
          let answerText = "";
          let answerIsTrue = false;
          if (
            this.question.studentAnswer[index - 1] &&
            this.question.stuAnswer[index - 1]
          ) {
            answerText = this.question.stuAnswer[index - 1];
            answerIsTrue = this.question.studentAnswer[index - 1].is_true;
          }

          newTitle = newTitle.replace(
            /_{5}/,
            `<span class='question-input question-input-answered ${
              answerIsTrue ? "question-input-true" : "question-input-false"
            }' autocomplete="off" onpaste = "return false"; disabled="value" value="${answerText}">${answerText}</span>`
          );
          index++;
          pos = newTitle.indexOf("_____");
        }
        return newTitle.replace(/[\r\n]/g, "<br />");
      }
      return this.question.title.replace(/[\r\n]/g, "<br />");
    },
  },
  props: {
    question: {
      type: Object,
    },
    isAnswer: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    getIndex(answerId) {
      return this.question.answer.findIndex((item) => {
        return item.id == answerId;
      });
    },
    handleStart() {
      console.log("开始");
      this.hasRecording = true;
    },
    handleEnd() {
      console.log("结束");
      this.hasRecording = false;
    },
    // 点击录音开始前的回调
    beforeRecordSatrt() {
      this.$pauseAllAudio();
    },
    pauseRecord() {
      if (this.hasRecording && this.$refs[`audioRecord-${this.question.id}`]) {
        this.$refs[`audioRecord-${this.question.id}`].clickStop();
      }
    },

    // 点击结束录音的回调
    // sentence_id=181&content=I'm Mike.
    // http://localhost:8101/sound/save?word_id=121&word_name=testcc&is_child=1&accent=1
    audioRecordEnd() {
      let blob = this.$refs[`audioRecord-${this.question.id}`].getMp3Data();
      let file = new window.File([blob], this.question.id + ".mp3", {
        type: blob.type,
      });
      let formData = new FormData();
      formData.append("sound_file", file);
      this.$emit("audioRecord", formData, blob);
    },
  },
};
</script>